<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { createNonEmptyRule, ModalForm, request, statusSelect } from '../../../utils';
import { FormInstance, FormRules } from 'element-plus';

type Fields = {
  postName?: string,
  postCode?: string,
  postSort?: number,
  status?: any,
  remark?: string
}

const props = defineProps<{ row?: Fields }>()

const form = ref<Fields>({})
const formRef = ref<FormInstance>()

const rules: FormRules<Fields> = {
  postName: createNonEmptyRule('岗位名称不能为空'),
  postCode: createNonEmptyRule('岗位编码不能为空')
}

onMounted(() => {
  form.value = props.row ? { ...props.row } : { status: true }
})

defineExpose<ModalForm>({
  validate () {
    return formRef.value?.validate()
  },
  submit () {
    return request.post(`/post/${props.row ? 'update' : 'add'}`, form.value)
  }
})
</script>

<template>
  <ElForm ref="formRef" label-width="6em" :model="form" :rules="rules">
    <ElFormItem label="岗位名称" prop="postName">
      <ElInput :maxlength="30" v-model="form.postName" />
    </ElFormItem>
    <ElFormItem label="岗位编码" prop="postCode">
      <ElInput :maxlength="10" v-model="form.postCode" />
    </ElFormItem>
    <ElFormItem label="岗位顺序">
      <ElInputNumber controls-position="right" :min="1" :max="9999" v-model="form.postSort" />
    </ElFormItem>
    <ElFormItem label="岗位状态">
      <ElRadioGroup v-model="form.status">
        <ElRadio v-for="_ in statusSelect" :value="_.value">{{ _.label }}</ElRadio>
      </ElRadioGroup>
    </ElFormItem>
    <ElFormItem label="备注">
      <ElInput type="textarea" :maxlength="300" v-model="form.remark" />
    </ElFormItem>
  </ElForm>
</template>
